<h1>Properties</h1>
<hr/>
<div class="row">
  <div class="col-md-3">Config file:</div>
  <div class="col-md-9"><p class="text-monospace">{{config?.path}}</p></div>
</div>
<hr/>
<div class="row">
  <div class="col-md-9">
    <table datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions" class="table table-hover table-striped">
      <thead>
      <tr>
        <th scope="col">Section</th>
        <th scope="col">Key</th>
        <th scope="col">Value</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let prop of config?.properties">
        <th scope="row">{{prop.section}}</th>
        <td>{{prop.key}}</td>
        <td>{{prop.value}}</td>
      </tr>
      </tbody>
    </table>
  </div>
  <div class="col-md-3">
    <div class="card">
      <div class="card-header">
        Config action
      </div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item list-group-item-action list-group-item-danger pointer" (click)="reload()">
          <i class="fas fa-sync-alt"></i> Reload config file
        </li>
      </ul>
    </div>
  </div>
</div>
